<template>
  <div id="orderDynamics">
    <div class="topHead">
      <label class="title">订单动态</label>
      <label class="subTitle">最新订单状态</label>
      <label class="more" @click="clickAction">更多</label>
    </div>

    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(order, index) in order_list" :key="index">
        <!--<img :src="sowing.icon_url" :alt="sowing.public_name">-->
        <div class="midDiv">
          <div class="leftContentDiv">
            <div class="address">{{order.address}}</div>
            <!--<div class="content">{{order.orderName}}</div>-->
            <div class="dateTime">{{order.createAt}}</div>
          </div>


          <div class="stateButtonDiv">
            <div class="stateButton" v-if="order.status == '1' ">待分配</div>
            <div class="stateButton" v-else-if="order.status == '2' ">处理中</div>
            <div class="stateButton" v-else-if="order.status == '3' ">待支付</div>
            <div class="stateButton" v-else-if="order.status == '4' ">待评价</div>
            <div class="stateButton" v-else-if="order.status == '5' ">已取消</div>
            <div class="stateButton" v-else-if="order.status == '6' ">已完成</div>
            <div class="stateButton" v-else>其他状态</div>
          </div>


        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import {mapState} from "vuex";

let vm = null;

export default {
  name: "OrderDynamics",
  props: {
    order_list: Array,
    clickAction: Function
  },
  methods: {
      needGoHeadeDispatchOrder(status){
          if (this.isHeadeDispatchOrder && status == '1'){
              return true;
          }
          return false;
      }
  },
  data() {
    return {
      swiperOption: {
        notNextTick: true,
        // 分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        // 循环
        loop: true,
        // 切换时长
        autoplay: {
          delay: 3000
        },
        // 速度
        speed: 600,
        // 滑动后回调函数
        on: {
          slideChangeTransitionEnd() {
            // console.log(this.activeIndex);
          },
          click() {
            // console.log('ss'+this.realIndex)
            // const realIndex = this.realIndex;
            // vm.carousel(vm.carousels[realIndex]);
            // var order = this.order_list[parseInt(this.realIndex)];
              var order = vm.order_list[this.realIndex];

              if (vm.isMaster) {
                  if(vm.needGoHeadeDispatchOrder(order.status)){
                      vm.$router.push({
                          name: "orderDetailPage",
                          query: {
                              isMaster: "true",
                              orderid: order.id,
                              isDispatchOrder:"true"
                          }
                      });

                  }else {
                      vm.$router.push(
                          {
                              name: "orderDetailPage",
                              query: {
                                  isMaster: "true",
                                  orderid:order.id
                              }
                          });
                  }

              }else {
                  vm.$router.push(
                      {
                          name: "orderDetailPage",
                          query: {
                              isMaster: "false", orderid:order.id
                          }
                      });
              }





          }
        }
      }
    };
  },
  computed: {
      ...mapState(['userInfo']),
      isMaster(){
          if (this.userInfo && (this.userInfo.role === 'HEADMAN' || this.userInfo.role === 'MASTER')){
              return true;
          }
          return false;
      },
      isHeadeDispatchOrder(){
          if (this.userInfo && (this.userInfo.role === 'HEADMAN')){
              return true;
          }
          return false;
      },
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  components: {
    swiper,
    swiperSlide
  },
    created() {
        vm = this;
    }
};
</script>

<style scoped>
#orderDynamics {
  /*height: 11rem;*/
  margin-top: 1.3333333333333333rem;
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;
  border-radius:0.16666666666666666rem;
  background-color: white;
}

.topHead {
  height: 3.3rem;
  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;
  flex-direction: row;
  position: relative;

  border-bottom: 0.5px dashed #bfc3cd;
}

.title {
  /*position: absolute;*/

  font-family: "PingFangSC-Medium";
  height:3.3rem;
  font-size:1.2rem;
  font-weight:500;
  color:rgba(18,28,50,1);
  line-height:3.3rem;

}
.subTitle {
  height: 3.3rem;
  font-size: 0.8333333333333334rem;
  font-family: "PingFangSC-Regular";
  line-height: 3.3rem;
  font-weight:400;
  color:rgba(18,28,50,1);

  margin-left: 1rem;
}
.more {
  position: absolute;
  font-family: "PingFangSC-Regular";
  top: 1.2666666666666666rem;
  right: 0rem;

  height:1.2333333333333334rem;
  font-size:0.8666666666666667rem;
  font-family:PingFangSC;
  font-weight:400;
  color:rgba(122,132,145,1);
  line-height:1.2333333333333334rem;
}

.swiper {

  margin-left: 1.3333333333333333rem;
  margin-right: 1.3333333333333333rem;

  padding-bottom: 2rem;

  /*height: 7.633333333333334rem;*/
  background-color: transparent;

  border-radius:0.32rem;
}
.swiper img {
  width: 100%;
  height: 100%;
}
.swiper >>> .swiper-pagination-bullets {
  bottom: 0.7333333333333333rem;
}
.swiper >>> .swiper-pagination-bullet {

  border-radius: 0px;
  width:0.5333333333333333rem;
  height:0.13333333333333333rem;
  background:rgba(57,123,230,1);
}
.swiper >>> .swiper-pagination-bullet-active {
  background-color: #397be6;
}

.address {
  font-family: "PingFangSC-Regular";
  margin-top: 0.7666666666666667rem;

  /*height:1.2rem;*/
  font-size:0.8333333333333334rem;
  font-weight:400;
  color:rgba(122,132,145,1);
  line-height:1.2rem;
}

.midDiv {
  display: flex;
  flex-direction: row;
  /*position: relative;*/
  justify-content: space-between;
  align-items: center;
}
.content {
  margin-top: 0.2rem;
  color: #121c32;
  font-family: "PingFangSC-Medium";
  height:1.6666666666666667rem;
  font-size:1.2rem;
  font-weight:600;
  color:rgba(18,28,50,1);
  line-height:1.6666666666666667rem;

}
.dateTime {
  color: #bfc3cd;
  font-family: "PingFangSC-Regular";

  height:1.2rem;
  font-size:0.8333333333333334rem;
  font-weight:400;
  color:rgba(191,195,205,1);
  line-height:1.2rem;
}
.stateButton {

  font-family: "PingFangSC-Medium";

  text-align: center;

  font-size:0.8666666666666667rem;
  font-weight:500;
  color:rgba(255,255,255,1);
  line-height:2.2666666666666666rem;

  width:5.2rem;
  height:2.2666666666666666rem;
  background:rgba(192,175,124,1);
  border-radius:1.1333333333333333rem;

}

  .leftContentDiv{
    display: flex;
    flex-direction: column;
    justify-content: start;
  }

  .stateButtonDiv{
      height: 100%;
  }
</style>
